import React,{ memo, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";

import { HotRecommendWrapper } from "./style";
import { getHotRecommendAction } from "../../store/actionCreators";

import CJXThemeHeaderRcm from "@/components/theme-header-rcm";
import CJXSongsCover from "@/components/songs-cover"


export default memo(function CJXHotRecommend () {
    const keywords = ["华语","流行", "摇滚", "民谣", "电子"];
    //state

    //redux hook
    const { hotRecommends } = useSelector(state => ({
        hotRecommends: state.getIn(["recommend", "hotRecommends"])

    }), shallowEqual);
    const dispatch = useDispatch();

    //other hook
    useEffect(() => {
        // console.log(hotRecommends.length);
        hotRecommends.length || dispatch(getHotRecommendAction(8))
    }, [dispatch, hotRecommends]);
    
    return (
        <HotRecommendWrapper>
            <CJXThemeHeaderRcm title="热门推荐" keywords={keywords} url="/discover/songs"></CJXThemeHeaderRcm>
                <div className="recommend-list">
                    {
                        hotRecommends.map((item, index) => {
                            return <CJXSongsCover key={item.id} info={item}/>
                        })
                    }
                </div>
        </HotRecommendWrapper>
    )
})